<template>
    <div>
        <div>
            <el-table :data="emps" max-height="680px" size="small"
                      :border="true" style="width: 74%"
                      v-loading="loading"
                      stripe
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading">
                <el-table-column type="selection"
                                 align="center"
                                 fixed="left"
                                 width="55">
                </el-table-column>
                <el-table-column prop="emname"
                                 align="center"
                                 label="姓名"
                                 fixed="left"
                                 width="100">
                </el-table-column>
                <el-table-column prop="workID"
                                 align="center"
                                 label="工号"
                                 fixed="left"
                                 width="100px">
                </el-table-column>
                <el-table-column prop="email"
                                 align="center"
                                 label="邮箱"
                                 width="200px">
                </el-table-column>
                <el-table-column prop="phone"
                                 align="center"
                                 label="电话号码"
                                 width="150px">
                </el-table-column>
                <el-table-column prop="department.name"
                                 label="所属部门"
                                 align="center"
                                 width="130px">
                </el-table-column>
                <el-table-column label="工资账套"
                                 align="center"
                                 width="150px">
                    <template slot-scope="scope">
                        <el-popover v-if="scope.row.salary"
                                    placement="right"
                                    title="详情"
                                    width="200"
                                    trigger="hover">
                            <div>
                                <table>
                                    <tr>
                                        <td>基本工资:</td>
                                        <td>{{scope.row.salary.basicSalary}}</td>
                                    </tr>
                                    <tr>
                                        <td>奖金:</td>
                                        <td>{{scope.row.salary.bonus}}</td>
                                    </tr>
                                    <tr>
                                        <td>午餐补助:</td>
                                        <td>{{scope.row.salary.lunchSalary}}</td>
                                    </tr>
                                    <tr>
                                        <td>交通补助:</td>
                                        <td>{{scope.row.salary.trafficSalary}}</td>
                                    </tr>
                                    <tr>
                                        <td>养老金比率:</td>
                                        <td>{{scope.row.salary.pensionPer}}</td>
                                    </tr>
                                    <tr>
                                        <td>养老金基数:</td>
                                        <td>{{scope.row.salary.pensionBase}}</td>
                                    </tr>
                                    <tr>
                                        <td>医疗保险比率:</td>
                                        <td>{{scope.row.salary.medicalPer}}</td>
                                    </tr>
                                    <tr>
                                        <td>医疗基金:</td>
                                        <td>{{scope.row.salary.medicalBase}}</td>
                                    </tr>
                                    <tr>
                                        <td>公积金比率:</td>
                                        <td>{{scope.row.salary.accumulationFundPer}}</td>
                                    </tr>
                                    <tr>
                                        <td>公积金基数:</td>
                                        <td>{{scope.row.salary.accumulationFundBase}}</td>
                                    </tr>
                                </table>
                            </div>
                            <el-tag slot="reference" type="success" v-if="scope.row.salary">{{scope.row.salary.name}}</el-tag>
                        </el-popover>
                        <el-tag type="danger" v-if="!scope.row.salary">暂未设置</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"
                                 align="center"
                width="300">
                    <template slot-scope="scope">
                        <el-popover
                                placement="right"
                                title="编辑工资账套"
                                @show="showPop(scope.row.salary)"
                                @hide="hidePop(scope.row)"
                                width="200"
                                trigger="click">
                            <div>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in Salarys"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <el-button slot="reference" size="mini" type="warning">修改工资账套</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-left: 300px;margin-top: 10px">
            <el-pagination
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 30, 50, 100]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'SalSobCfg',
        data() {
            return {
                loading: false,
                emps: [],
                currentPage: 1,
                size: 10,
                total: 777,
                Salarys: [],
                value: null
            }
        },
        mounted() {
            /* 获取数据 */
            this.initEmployees();
            this.initSalary();
        },
        methods: {
            initSalary(){
                this.getRequest('/salary/sobcfg/salaries').then(resp=>{
                    if (resp){
                        this.Salarys=resp;
                    }
                })
            },
            hidePop(data) {
                if (this.value&&this.value!= data.salary.id) {
                    this.putRequest('/salary/sobcfg/?eid=' + data.id + '&sid=' + this.value)
                        .then(res => {
                            if (res) {
                                /* 获取数据 */
                                this.initEmployees()
                            }
                        })
                }
            },
            showPop(data) {
                /* 获取所有工资账套 */
                this.initDepartments()
                if (data) {
                    this.value = data.id
                } else {
                    this.value = null;
                }
            },
            handleSizeChange(val) {
                this.size = val
                /* 获取数据 */
                this.initEmployees()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                /* 获取数据 */
                this.initEmployees()
            },
            /* 获取所有工资账套 */
            initDepartments() {
                this.getRequest('/salary/sobcfg/salaries')
                    .then(res => {
                        if (res) {
                            this.Salarys = res
                        }
                    })
            },
            /* 获取数据 */
            initEmployees() {
                this.loading = true
                this.getRequest('/salary/sobcfg/?currentPage=' + this.currentPage + '&size=' + this.size)
                    .then(res => {
                        if (res) {
                            this.emps = res.data
                            this.total = res.total
                            this.loading = false
                        }
                        this.loading = false
                    })
            }
        }
    }
</script>

<style scoped>

</style>